<div class="layuimini-main">
    <table class="layui-hide" id="hostDetailTableId" lay-filter="hostDetailTableFilter"></table>
</div>

<script type="text/html" id="currentTableBar">
    {{#  if(d.status == '0'){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-offline" lay-event="offline">下线</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-xs data-count-online" lay-event="online">上线</a>
    {{#  } }}
</script>

<script>
    layui.use(['form', 'table', 'layer', 'miniAjax'], function () {
        var table = layui.table,
            layer = layui.layer,
            form = layui.form,
            miniAjax = layui.miniAjax;

        var hostsId = window.hostsId;
        console.log("hostsId = " + hostsId)

        var hostDetailTable = table.render({
            elem: '#hostDetailTableId',
            url: '/hosts/listItems',
            contentType: 'application/json',
            method: 'post', //如果无需自定义HTTP类型，可不加该参数
            where: {'hostsId': hostsId}, // 初始化时带的参数
            cols: [
                [
                    {type: 'numbers', width: '5%', title: '序号', align: 'center'},
                    {field: 'protocol', width: '15%', title: '协议'},
                    {field: 'host', width: '25%', title: '地址'},
                    {field: 'port', width: '10%', title: '端口'},
                    {
                        field: 'status', title: '状态', align: 'center', templet: function (d) {
                            if (d.status == '0') {
                                return `<span class="layui-badge layui-bg-blue">在线</span>`;
                            } else {
                                return `<span class="layui-badge layui-bg-red">离线</span>`;
                            }
                        }
                    },
                    {
                        field: 'healthy', title: '健康状态', align: 'center', templet: function (d) {
                            if (d.healthy == '0') {
                                return `<span class="layui-badge layui-bg-blue">健康</span>`;
                            } else {
                                return `<span class="layui-badge layui-bg-red">异常</span>`;
                            }
                        }
                    },
                    {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}
                ]
            ],
            skin: 'line',
            page: false
        });


        table.on('tool(hostDetailTableFilter)', function (obj) {
            var lineData = obj.data;
            if (obj.event === 'online') {
                layer.confirm('确定上线此节点吗', function (index) {
                    layer.close(index);
                    miniAjax.get({
                        url: '/hosts/online?id=' + lineData.id,
                        success: function (res) {
                            if (res.code == '0') {
                                layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                    // 重载表格，刷新数据
                                    hostDetailTable.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        }
                    });
                });
            } else if (obj.event === 'offline') {
                layer.confirm('确定下线此服务节点吗', function (index) {
                    layer.close(index);
                    miniAjax.get({
                        url: '/hosts/offline?id=' + lineData.id,
                        success: function (res) {
                            if (res.code == '0') {
                                layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                    // 重载表格，刷新数据
                                    hostDetailTable.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        }
                    });
                });
            }
        });
    });

</script>